<template>
  <div class="login">
    <el-card class="login-card">
      <!-- <template #header>
        <div class="card-header">
          <span>用户登录</span>
        </div>
      </template> -->
      <div class="login-form">
        <div class="logo">LOGIN</div>
        <el-form ref="userInfoRef" :model="userInfo" status-icon>
          <el-form-item prop="name">
            <el-input v-model="userInfo.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item prop="region">
            <el-input v-model="userInfo.password" placeholder="密码" />
          </el-form-item>
          <el-form-item prop="region">
            <el-button
              color="rgb(31, 113, 95)"
              style="width: 50%; height: 40px; outline: none; border: unset"
              round
              @click="loginBtn"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="welcome">
        <div class="text">欢迎进入后台管理系统</div>
        <div class="welcome-btn">
          <el-button round>还没有账户? 点击注册</el-button>
        </div>
      </div>
      <!-- <div class="register-form">
        注册
      </div> -->
    </el-card>
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { tipsMsg } from "@/main";
import { loginApi } from "@/admin/api/login";
import { userCounter } from "@/stores/counter";
export default {
  setup() {
    // 实例化路由
    const router = useRouter();
    // 登录模块
    const userInfo = reactive({
      username: "xiaomi",
      password: "mi010409"
    });
    const loginBtn = () => {
      const user = userCounter();

      loginApi(userInfo).then((res) => {
        if (res.data.status !== 1) return tipsMsg(res.data.msg, "error");
        user.token = res.data.data.token;
        window.localStorage.setItem("token", JSON.stringify(user.token));
        
        // 登录成功
        tipsMsg(res.data.msg, "success");
        setTimeout(() => {
          router.push("/admin/layout");
        }, 1000);
      });
    };

    return {
      userInfo,
      loginBtn,
    };
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 600px) {
  .login-form {
    width: 100%;
    padding: 0 .2rem;
  }

  .login-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 0.1rem;
    color: #000;
    border: unset;
    :deep(.el-card__body) {
      display: flex;
      padding: 0;
      .el-form {
        margin-top: 0.2rem;
        .el-form-item {
          margin: 0 auto;
          margin-bottom: 0.5rem;
          width: 75%;
          .el-form-item__content {
            justify-content: center;
          }
        }
        .el-input__wrapper {
          border-radius: 0.2rem;
        }
      }
    }
    // filter: blur(1px); /*滤镜*/
  }
  .welcome {
    display: none;
  }
}

@media screen and (min-width: 600px) {
  .login-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 0.1rem;
    color: #000;
    border: unset;
    :deep(.el-card__body) {
      display: flex;
      padding: 0;
      .el-form {
        margin-top: 0.2rem;
        .el-form-item {
          margin: 0 auto;
          margin-bottom: 0.5rem;
          width: 75%;
          .el-form-item__content {
            justify-content: center;
          }
        }
        .el-input__wrapper {
          border-radius: 0.2rem;
        }
      }
    }
    // filter: blur(1px); /*滤镜*/
  }
  .welcome {
    width: 50%;
    display: flex;
    flex-direction: column;
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2Fimg%2Ftupian%2Fpre%2F201911%2F29%2Fyikeshu.jpg&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666433212&t=1bd435f7af87cbd46618a5f413099af3");
    background-position: top;
    background-size: cover;
    align-items: center;
    padding-top: 0.58rem;
    position: relative;
    .text {
      font-size: 0.2rem;
      color: #fff;
      margin-bottom: 0.75rem;
      z-index: 9;
    }
    :deep(.el-button) {
      background-color: rgba(255, 255, 255, 0) !important;
      color: #fff;
    }
  }
  .login-form {
    width: 50%;
    padding: 0 .2rem;
  }
}
.login {
  width: 100vw;
  height: 100vh;
  background: url("https://www.cat61.com/zb_users/plugin/LayCenter/static/wallpaper/mount.jpg")
    no-repeat center;
  background-size: cover;
}

.login-form {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0 0.23rem;
  .logo {
    width: 100%;
    // height: .7rem;
    line-height: 60px;
    text-align: center;
    color: green;
    font-size: 0.25rem;
    border-bottom: 0.01rem solid green;
    padding: 0.1rem 0;
  }
}
</style>
